<template>
  <a-spin :spinning="spinning">
    <a-card :bordered="false">
      <a-form :form="form" :colon="false">
        <a-row :gutter="80">
          <a-col :span="12">
            <a-form-item label="现住房性质">
              <a-select v-decorator="['HousProperties', { rules: [{ required: true, message: '请选择现住房性质' }] }]">
                <a-select-option :value="item.DROPVALUE" v-for="item in housingNatureOptions" :key="item.DROPKEY"
                  >{{ item.DROPVALUE }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="现住房是否用于测算人均住房建筑面积">
              <a-select
                v-decorator="[
                  'BurveyIfTestArea',
                  { rules: [{ required: true, message: '请选择现住房是否用于测算人均住房建筑面积' }] },
                ]"
              >
                <a-select-option value="是">是</a-select-option>
                <a-select-option value="否">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="现住房建筑面积（㎡）">
              <a-input-number
                v-decorator="[
                  'BurveyBuildArea',
                  { rules: [{ required: true, message: '请输入现住房建筑面积（㎡）' }] },
                ]"
                :formatter="(value) => `${value}㎡`"
                :parser="(value) => value.replace('㎡', '')"
                :precision="2"
                step="0.01"
                :min="0"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="人均住房建筑面积（㎡）">
              <a-input-number
                v-decorator="[
                  'BurveyAreaPer',
                  { rules: [{ required: true, message: '请输入人均住房建筑面积（㎡）' }] },
                ]"
                :formatter="(value) => `${value}㎡`"
                :parser="(value) => value.replace('㎡', '')"
                :precision="2"
                step="0.01"
                :min="0"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="家庭人均月收入（元）">
              <a-input-number
                v-decorator="['BurveyIncome', { rules: [{ required: true, message: '请输入家庭人均月收入（元）' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="现住房产权人姓名">
              <a-input
                v-decorator="['HousProperty', { rules: [{ required: true, message: '请输入现住房产权人姓名' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="现住房实际居住人数">
              <a-input-number
                v-decorator="['BurveyNumber', { rules: [{ required: true, message: '请输入现住房实际居住人数' }] }]"
                :precision="0"
                :min="0"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="申请保障人数">
              <a-input-number
                v-decorator="['BurveyVfyNumber', { rules: [{ required: true, message: '请输入申请保障人数' }] }]"
                :precision="0"
                :min="0"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="其它说明(如需特别标注该户所属居委会请在此处增加：户籍为XXX居委会)">
              <a-textarea
                v-decorator="['BeviewRemark', { rules: [{ required: true, message: ' 请输入其他说明' }] }]"
                placeholder="请输入其他说明"
                :rows="4"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="调查人">
              <a-input
                disabled
                v-decorator="['BeviewAgent', { rules: [{ required: true, message: '请输入调查人' }] }]"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="调查时间">
              <a-input
                disabled
                v-decorator="['BeviewDate', { rules: [{ required: true, message: '请输入调查时间' }] }]"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-spin>
</template>

<script>
import moment from 'moment'
import { getDropdownList } from '@/api/common'
import pick from 'lodash.pick'
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'report' }),
      housingNatureOptions: [],
      spinning: false,
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.spinning = true
      this.setDefault()
      getDropdownList({ PmKey: 'housingNature' })
        .then((res) => {
          this.housingNatureOptions = res
          // 修改
          if (!this.$isEmpty(this.data)) {
            this.form.setFieldsValue(
              pick(this.data, [
                'HousProperties',
                'BurveyIfTestArea',
                'BurveyBuildArea',
                'BurveyAreaPer',
                'BurveyIncome',
                'HousProperty',
                'BurveyNumber',
                'BurveyVfyNumber',
                'BeviewRemark',
                'BeviewAgent',
              ])
            )
            this.form.setFieldsValue({
              BeviewDate: moment(this.BeviewDate).format('YYYY-MM-DD'),
            })
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    // 设置调查人
    setDefault() {
      this.form.setFieldsValue({
        BeviewAgent: this.$store.getters.nickname,
        BeviewDate: moment(new Date()).format('YYYY-MM-DD'),
      })
    },
    handleSubmit() {
      return new Promise((resolve, reject) => {
        this.form.validateFields((err, values) => {
          if (!err) {
            resolve(values)
          } else {
            // reject(new Error('调查报告未填写完整'))
            // this.$error({
            //   title: '提示',
            //   content: '调查报告未填写完整',
            // })
            this.$message.error('调查报告未填写完整', 5)
          }
        })
      })
    },
    handleReset() {
      this.$confirm({
        title: '确认清空调查报告数据?',
        content: '清空后需要重新填写',
        okType: 'danger',
        onOk: () => {
          this.form.resetFields()
          this.setDefault()
          this.$message.success({
            text: '已清空数据',
          })
        },
      })
    },
  },
}
</script>
<style lang="less" scoped>
.ant-input-number {
  width: 100%;
}
</style>
